<template>
  <el-dialog @close="reset" :title="specsData.id>0?'编辑':'新增'" :visible.sync="info.isShow">
    <el-form :model="specsData" label-width="90px" :rules="rules"  ref="specsForm">
      <el-form-item label="规格名称" prop="specsname">
        <el-input
          placeholder="规格名称"
          v-model="specsData.specsname"
        ></el-input>
      </el-form-item>
      <el-form-item label="规格可选值" prop="attrs">
        <div class="item" v-for="(item, index) in attrList" :key="index">
          <el-input
            placeholder="规格可选值"
            v-model="attrList[index]"
          ></el-input>
          <el-button @click="addAttr" type="primary" v-if="index === 0"
            >新增</el-button
          >
          <el-button @click="delAttr(index)" type="warning" v-else
            >删除</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="规格状态" prop="status">
        <el-radio-group v-model="specsData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  // 父组件传递过来的数据
  props: ["info"],
  data() {
    // 自定义表单校验函数
    // rule系统自动注入的表单校验规则
    // value系统自动注入, 当前表单元素的内容
    // callback系统自动注入, 回调函数
    const validAttr = (rule, value, callback) => {
      // 假设所有的数组元素都不为空
      let flag = true;
      this.attrList.forEach((item) => {
        if (item.trim() === "") {
          //  推翻假设
          flag = false;
        }
      });
      // 表单校验不通过
      if (!flag) {
        return callback(new Error("请输入规格属性值"));
      }
      // 表单校验通过
      callback();
    };

    return {
      //
      attrList: [""],
      // 和表单元素进行绑定
      specsData: {
        specsname: "", // 规格名称
        attrs: "", // 规格属性可选值
        status: "",
      },
      // 定义表单校验规则
      rules: {
        specsname: {
          required: true,
          message: "请输入规格名称",
          trigger: "blur",
        },
        // 引用自定义表单校验函数进行表单校验
        attrs:{
            validator:validAttr,trigger:'blur'
        },
        status: {
          required: true,
          message: "请选择规格状态",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    // 新增规格属性可选值
    addAttr() {
      if (this.attrList.length >= 5) {
        this.$message.warning("规格可选值最多只能添加5个");
        return false;
      }
      this.attrList.push("");
    },
    // 移除规格属性可选值
    delAttr(index) {
      this.attrList.splice(index, 1);
    },
    // 设置表单元素
    setFormData(obj){
      // 更新specsData, attrList
      this.specsData={...obj};
      this.attrList=obj.attrs;
    },
    // 重置数据
    reset() {
        // 重置表单元素
        this.specsData={
            specsname:'',
            attrs:'',
            status:''
        }
        this.attrList=[''];
        // 关闭对话框
        this.info.isShow=false;
    },
    submit() {
        this.$refs.specsForm.validate(valid=>{
            if(valid){
                // 手动同步规格属性可选值
                this.specsData.attrs=this.attrList.join(',');
                const url=this.specsData.id>0?'/specsedit':'/specsadd';
                this.$axios.post(url,this.specsData).then(res=>{
                    if(res.code===200){
                        this.$message.success(res.msg);
                        // 更新数据列表: 通知父组件实现数据更新
                        this.$emit('specsUpdate');
                        // 数据重置
                        this.reset();
                    }else{
                        this.$message.error(res.msg);
                    }
                });
            }
        })
    },
  },
};
</script>

<style scoped>
.item {
  display: flex;
  margin: 5px 0;
}
</style>